<template>
	<page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
	<view>
		<view class="top" :style="`padding-top: ${$Height() - 30}px;`">
			<view class="top_box">
				<view class="top_box_left">
					<image class="top_box_left_img" src="/static/30.png" mode="" @click="$fh"></image>
					<view class="top_box_left_box" @click="to_index">
						<image class="top_box_leftt_box_img" src="/static/83.png" mode=""></image>
						返回用户端
					</view>
				</view>
				<view class="top_box_title">订单</view>
				<view class="top_box_right" :style="`width: ${$Width() + 15}px;`"></view>
			</view>
			<image class="top_img" src="/static/29.png" mode=""></image>

			<view class="search">
				<image class="search_left" src="/static/88.png" mode=""></image>
				<input
					class="search_inp"
					type="text"
					placeholder="请输入搜索内容"
					confirm-type="search"
					v-model="title"
					@confirm="indexlist" />
				<view class="search_right">搜索</view>
			</view>

			<view class="nav">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="dateChange">
					<view class="nav_nr">
						<view class="nav_nr_title" v-if="date">{{ date }}</view>
						<view class="nav_nr_title" v-else>入住日期</view>
						<image class="nav_nr_img" src="/static/8.png" mode=""></image>
					</view>
				</picker>
				<picker mode="selector" :value="status_title" :range="rangearr" @change="statusChange">
					<view class="nav_nr">
						<view class="nav_nr_title" v-if="status_title">{{ status_title }}</view>
						<view class="nav_nr_title" v-else>房源状态</view>
						<image class="nav_nr_img" src="/static/8.png" mode=""></image>
					</view>
				</picker>
			</view>
		</view>

		<view class="con">
			<view class="list" v-for="(item, index) in list" :key="index" @click="to_order_detail(item.id)">
				<view class="list_top">
					<image class="list_top_img" :src="item.photo" mode=""></image>
					<view class="list_top_box">
						<view class="list_top_box_title">
							<view class="list_top_box_title_text">{{ item.title }}</view>
							<view class="list_top_box_title_box" v-if="item.status == 4" @click.stop="del(index, item.id)">
								<image class="list_top_box_title_box_img" src="/static/66.png" mode=""></image>
								删除
							</view>
						</view>
						<view class="list_top_box_text">{{ item.quyu }}</view>
						<view class="list_top_box_text">
							{{ cityStore.dayDate(item.ktime).month_day }}至{{ cityStore.dayDate(item.jtime).month_day }} ·
							{{ item.jiwan }}
							晚·
							{{ item.czleixing }}
						</view>
					</view>
				</view>
				<view class="list_box">
					<view class="list_box_left list_box_left_1" v-if="item.status == 5">
						<view class="list_box_left_text">待支付</view>
						<view class="list_box_left_num" style="margin-left: 15rpx">
							{{ formatCountdown(item.beizhu) }}
						</view>
					</view>

					<view class="list_box_left list_box_left_1" v-if="item.status == 0">
						<view class="list_box_left_text">待接单</view>
					</view>
					<view class="list_box_left list_box_left_1" v-if="item.status == 1">
						<view class="list_box_left_text">待入住</view>
					</view>
					<view class="list_box_left list_box_left_2" v-if="item.status == 2">
						<view class="list_box_left_text">已入住</view>
					</view>
					<view class="list_box_left list_box_left_3" v-if="item.status == 3">
						<view class="list_box_left_text">已完成</view>
					</view>

					<view class="list_box_right">
						<span class="list_box_right_text">支付金额</span>
						<span class="list_box_right_num">¥{{ item.price }}</span>
					</view>
				</view>
				<view class="list_text" v-if="item.status == 0">
					{{ formatCountdown_2(item.beizhu) }}
				</view>
				<view class="list_text" v-if="item.status == 1">请于{{ item.ktime }} 14:00-24:00入住</view>
				<view class="list_text" v-if="item.status == 2">请于{{ item.jtime }} 12:00之前需退房</view>
				<view class="list_btn" v-if="item.status == 0 || item.status == 1 || item.status == 2">
					<view class="list_btn_left"></view>
					<view class="list_btn_right" v-if="item.status == 0" @click.stop="open(1, index, item.id)">确认接单</view>
					<view class="list_btn_right" v-if="item.status == 1" @click.stop="open(2, index, item.id)">确认入住</view>
					<view class="list_btn_right list_btn_right_x" v-if="item.status == 2" @click.stop="open(3, index, item.id)">
						确认退房
					</view>
				</view>
			</view>
		</view>
		<TabBar :type="2" :index="2"></TabBar>

		<uni-popup ref="popup" type="center" background-color="#fff" border-radius="10px" @change="popup_change">
			<view class="popup_box">
				<view class="popup_box_top">温馨提示</view>
				<view class="popup_box_nr" v-if="popup_type == 1" style="text-align: center">是否确认接单？</view>
				<view class="popup_box_nr" v-if="popup_type == 2" style="text-align: center">是否确认入住？</view>
				<view class="popup_box_nr" v-if="popup_type == 3" style="text-align: center">是否确认退房？</view>
				<view class="popup_box_btn">
					<view class="popup_box_btn_nr btn1" @click="close">取消</view>
					<view class="popup_box_btn_nr btn2" @click="submit">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { useCityStore } from '@/utils/cityStore.js'
	const cityStore = useCityStore()
	const http = inject('$http')
	let date = ref('')
	let status_id = ref(10)
	let status_title = ref('')
	let rangearr = ref(['全部', '待接单', '待入住', '已入住', '已完成'])
	let list = ref([])
	let title = ref('')
	let show = ref(false)
	let popup = ref(null)
	let popup_id = ref(0)
	let popup_index = ref(0)
	let popup_type = ref(1)

	const submit = () => {
		let id = popup_id.value
		let index = popup_index.value
		if (popup_type.value == 1) {
			http.post('/srapi/keyuan/qrdingdan', { id: id }).then((res) => {
				console.log('确认接单', res)
				uni.showToast({
					mask: true,
					title: res.msg,
					icon: 'none',
					duration: 500
				})
				list.value[index].status = 1
				close()
			})
		}
		if (popup_type.value == 2) {
			http.post('/srapi/keyuan/rzdingdan', { id: id }).then((res) => {
				console.log('确认入住', res)
				uni.showToast({
					mask: true,
					title: res.msg,
					icon: 'none',
					duration: 500
				})
				list.value[index].status = 2
				close()
			})
		}
		if (popup_type.value == 3) {
			http.post('/srapi/keyuan/tfdingdan', { id: id }).then((res) => {
				console.log('确认退房', res)
				uni.showToast({
					mask: true,
					title: res.msg,
					icon: 'none',
					duration: 500
				})
				list.value[index].status = 3
				close()
			})
		}
	}

	const popup_change = (e) => {
		show.value = e.show
	}
	const open = (type, index, id) => {
		popup.value.open()
		popup_type.value = type
		popup_index.value = index
		popup_id.value = id
	}
	const close = () => {
		popup.value.close()
	}

	const dateChange = (e) => {
		date.value = e.detail.value   
		indexlist()
	}
	const statusChange = (e) => {
		console.log('房源状态')

		status_title.value = rangearr.value[e.detail.value]
		if (e.detail.value == 0) {
			status_id.value = 10
		}
		if (e.detail.value == 1) {
			status_id.value = 0
		}
		if (e.detail.value == 2) {
			status_id.value = 1
		}
		if (e.detail.value == 3) {
			status_id.value = 2
		}
		if (e.detail.value == 4) {
			status_id.value = 3
		}
		indexlist()
	}
	const del = (index, val) => {
		uni.showModal({
			title: '提示',
			content: '是否删除该订单记录?',
			success: function (res) {
				if (res.confirm) {
					list.value.splice(index, 1)
					return
					http.post('/srapi/wode/scdingdan', { id: val }).then((res) => {
						console.log('用户点击确定', res)
						uni.showToast({
							mask: true,
							title: res.msg,
							icon: 'none',
							duration: 500
						})
						list.value.splice(index, 1)
					})
				}
			}
		})
	}
	const indexlist = async () => {
		await http
			.post('/srapi/keyuan/dingdan', {
				ttt: date.value,
				status: status_id.value,
				title: title.value
			})
			.then((res) => {
				console.log('返回值', res)
				list.value = res.data
			})
	}

	onShow(() => {
		console.log('页面刷新')
	})

	onLoad((option) => {
		console.log('接收传参:', option)
		indexlist()
	})
	const startDate = () => {
		return getDate('start')
	}
	const endDate = () => {
		return getDate('end')
	}
	const getDate = (type) => {
		const date = new Date()
		let year = date.getFullYear()
		let month = date.getMonth() + 1
		let day = date.getDate()

		if (type === 'start') {
			year = year - 10
		} else if (type === 'end') {
			year = year + 10
		}
		month = month > 9 ? month : '0' + month
		day = day > 9 ? day : '0' + day
		return `${year}-${month}-${day}`
	}
	let timer = null

	// 计算倒计时
	const calculateCountdown = (item) => {
		let expireTime = item.replaceAll('-', '/')
		// console.log('expireTime', expireTime)
		const now = new Date().getTime()
		const end = new Date(expireTime).getTime()
		const timeLeft = end - now

		if (timeLeft <= 0) {
			return {
				days: 0,
				hours: 0,
				minutes: 0,
				seconds: 0,
				expired: true
			}
		}

		const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24))
		const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
		const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60))
		const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000)

		return {
			days,
			hours: hours < 10 ? `0${hours}` : hours,
			minutes: minutes < 10 ? `0${minutes}` : minutes,
			seconds: seconds < 10 ? `0${seconds}` : seconds,
			expired: false
		}
	}

	// 格式化倒计时显示
	const formatCountdown = (countdown) => {
		if (!countdown || countdown.expired) {
			return '已过期'
		} else {
			// return `${countdown.days}天 ${countdown.hours}:${countdown.minutes}:${countdown.seconds}`
			return `${countdown.days}天 ${countdown.hours}:${countdown.minutes}:${countdown.seconds}`
		}
	}
	// 格式化倒计时显示
	const formatCountdown_2 = (countdown) => {
		if (!countdown || countdown.expired) {
			return '已失效'
		} else {
			// return `${countdown.days}天 ${countdown.hours}:${countdown.minutes}:${countdown.seconds}`
			return ` ${countdown.hours}时${countdown.minutes}分${countdown.seconds}秒内未接单将失效`
		}
	}

	// 更新所有订单的倒计时
	const updateAllCountdowns = () => {
		list.value.forEach((order) => {
			order.beizhu = calculateCountdown(order.dqtime)
		})
	}
	onMounted(() => {
		// 初始化倒计时
		updateAllCountdowns()

		// 设置定时器每秒更新
		timer = setInterval(() => {
			updateAllCountdowns()
		}, 1000)
	})

	onUnmounted(() => {
		// 清除定时器
		if (timer) {
			clearInterval(timer)
		}
	})
	const to_index = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	const to_order_detail = (id) => {
		uni.navigateTo({
			url: '/pages_B/order_detail/order_detail?id=' + id
		})
	}
</script>

<style lang="less" scoped>
	.top {
		width: 750rpx;
		padding: 30rpx;
		box-sizing: border-box;
		position: sticky;
		left: 0;
		top: 0;
		z-index: 9;
		background-color: #f4f5f9;
		.top_box {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10rpx;
			.top_box_left {
				display: flex;
				align-items: center;
				position: relative;
				z-index: 2;
				.top_box_left_img {
					width: 17rpx;
					height: 30rpx;
					margin-right: 30rpx;
				}
				.top_box_left_box {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 190rpx;
					height: 60rpx;
					background: rgba(255, 255, 255, 0.8);
					border: 1rpx solid #d4d4d4;
					border-radius: 31rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
					letter-spacing: -0.43rpx;
					.top_box_leftt_box_img {
						width: 26rpx;
						height: 26rpx;
						margin-right: 5rpx;
					}
				}
			}
			.top_box_title {
				position: absolute;
				z-index: 1;
				width: 750rpx;
				left: -30rpx;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}
		}

		.top_img {
			width: 750rpx;
			height: 320rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.search {
			padding: 5rpx;
			background: #ffffff;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-left: 6rpx solid #3475f3;
			margin-bottom: 30rpx;
			.search_left {
				width: 24rpx;
				height: 24rpx;
				margin-left: 20rpx;
			}
			.search_inp {
				padding: 0 15rpx;
				flex: 1;
				font-size: 24rpx;
				font-weight: 500;
				color: #787878;
			}
			.search_right {
				width: 113rpx;
				height: 74rpx;
				background: #3475f3;
				border-radius: 12rpx;
				font-size: 24rpx;
				font-weight: 700;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.nav {
			display: flex;
			justify-content: center;
			align-items: center;
			.nav_nr {
				padding: 0 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.nav_nr_title {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
				}
				.nav_nr_img {
					width: 18rpx;
					height: 18rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	.con {
		position: relative;
		z-index: 5;
		padding: 0 30rpx;
	}
	.list {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.list_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.list_top_img {
				width: 140rpx;
				height: 140rpx;
				margin-right: 21rpx;
				border-radius: 25rpx;
			}
			.list_top_box {
				flex: 1;
				.list_top_box_title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.list_top_box_title_text {
						font-size: 28rpx;
						font-weight: 700;
						color: #000000;
					}
					.list_top_box_title_box {
						font-size: 24rpx;
						font-weight: 500;
						color: #787878;
						.list_top_box_title_box_img {
							width: 28rpx;
							height: 28rpx;
							margin-right: 10rpx;
						}
					}
				}
				.list_top_box_text {
					font-size: 28rpx;
					font-weight: 500;
					color: #787878;
					margin-top: 18rpx;
				}
			}
		}

		.list_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.list_box_left {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				.list_box_left_text {
					font-size: 24rpx;
					font-weight: 700;
				}
				.list_box_left_num {
					font-size: 24rpx;
					font-weight: 500;
				}
			}
			.list_box_left_1 {
				color: #ff8400;
			}
			.list_box_left_2 {
				color: #12c89b;
			}
			.list_box_left_3 {
				color: #787878;
			}
			.list_box_right {
				.list_box_right_text {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
				}
				.list_box_right_num {
					font-size: 32rpx;
					font-weight: 700;
					color: #e93424;
					margin-left: 10rpx;
				}
			}
		}
		.list_text {
			padding-top: 10rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: #ff8400;
		}
		.list_btn {
			border-top: 1px solid #e4e5eb;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			padding-top: 15rpx;
			.list_btn_left {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #787878;
				.list_btn_left_Img {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}
			.list_btn_right {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 172rpx;
				height: 62rpx;
				background: #3475f3;
				border-radius: 31rpx;
				font-size: 24rpx;
				font-weight: 700;
				color: #ffffff;
			}
			.list_btn_right_x {
				background: #e93424;
			}
		}
	}

	.popup_box {
		width: 520rpx;
		box-sizing: border-box;
		padding: 20rpx;
		.popup_box_top {
			padding: 10rpx;
			font-size: 28rpx;
			font-weight: 700;
			text-align: center;
			color: #000000;
		}
		.popup_box_nr {
			padding: 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #000000;
			line-height: 48rpx;
			.span {
				color: #2468fb;
			}
		}

		.popup_box_btn {
			padding: 20rpx 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.popup_box_btn_nr {
				width: 182rpx;
				height: 62rpx;
				border-radius: 32rpx;
				font-size: 28rpx;
				font-weight: 700;
				text-align: center;
				line-height: 64rpx;
			}
			.btn1 {
				background: #ffffff;
				border: 1rpx solid #b4b4b4;
				color: #787878;
			}
			.btn2 {
				background: #2468fb;
				border: 1rpx solid #2468fb;
				color: #ffffff;
			}
		}
	}
	//
</style>
